<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Google Visualization API Sample</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1', {packages: ['annotatedtimeline']});
    google.load('visualization', '1', {packages: ['corechart']});
    google.setOnLoadCallback(drawVisualization);
    google.setOnLoadCallback(drawCandleChart);
    
    function drawCandleChart() {
        // Populate the data table.
        <%for vcb in @pdv%>
        	var dataTable = google.visualization.arrayToDataTable([<%= vcb[1].join(",") %>], true);

        	// Draw the chart.
        	var chart = new google.visualization.CandlestickChart(document.getElementById('candle_<%= vcb[0] %>'));
        	chart.draw(dataTable, {legend:'none'});
        <% end %> // end for vcb in @f_factor
    }
      
      
    function drawVisualization() {
      <% for b in @per_b %>
      	
      	var data = new google.visualization.DataTable();
      	data.addColumn('date', 'Date');
      	
      	data.addColumn('number', 'pdv on src leg');
      	data.addColumn('string', 'title1');
        data.addColumn('string', 'text1');
      	
      	data.addColumn('number', 'pdv on dest leg');
      	data.addColumn('string', 'title2');
        data.addColumn('string', 'text2');
      	
      	data.addRows(<%= b.size %>);
      	
      		<% for i in 0...b.size %>
  				data.setValue(<%= i %>, 0, new Date(<%= b[i].c2_start_time.to_i * 1000 %>));
        		data.setValue(<%= i %>, 1, <%= b[i].c64_pdv_on_src_leg.to_i %>);
        		data.setValue(<%= i %>, 4, <%= b[i].c71_pdv_on_dest_leg.to_i %>);
			<% end %>
			
        var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
          document.getElementById('<%= b[0].c28_call_dest_regid %>'));
        annotatedtimeline.draw(data, {'displayAnnotations': true});
     <% end %>
    }
  </script>
</head>
<table>
	<% for b in @per_b%>
	<tr>
		<td><%= b[0].c28_call_dest_regid %></td>
	</tr>
	<tr>
		<td style="width: 800px; height: 900px;">
			<div id="<%= b[0].c28_call_dest_regid %>" style="width: 800px; height: 400px;"> </div>
			<div id="candle_<%= b[0].c28_call_dest_regid %>" style="width: 300px; height: 300px;"> </div>
		</td>
	</tr>
    <% end %>
</table>